<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>井冈山旅游导航</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <!-- 头部导航 -->
    <header class="header">
        <div class="logo">
            <i class="fas fa-mountain"></i>
            <h1>井冈山旅游导航</h1>
        </div>
        <nav class="nav">
            <a href="#home" class="nav-link active">首页</a>
            <a href="#attractions" class="nav-link">景点</a>
            <a href="#routes" class="nav-link">路线</a>
            <a href="#map" class="nav-link">地图</a>
        </nav>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- 首页轮播 -->
        <section id="home" class="section active">
            <div class="hero">
                <div class="hero-content">
                    <h2>欢迎来到井冈山</h2>
                    <p>革命圣地，红色摇篮，绿色家园</p>
                    <button class="cta-button" onclick="showSection('attractions')">
                        <i class="fas fa-play"></i>
                        开始探索
                    </button>
                </div>
                <div class="hero-image">
                    <img src="https://images.unsplash.com/photo-1506905925346-14b1e0d0b0b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                         alt="井冈山风景">
                </div>
            </div>
        </section>

        <!-- 景点介绍 -->
        <section id="attractions" class="section">
            <div class="section-header">
                <h2>热门景点</h2>
                <p>探索井冈山的美丽风景和红色历史</p>
            </div>
            <div class="attractions-grid" id="attractionsGrid">
                <!-- 景点卡片将通过JavaScript动态生成 -->
            </div>
        </section>

        <!-- 旅游路线 -->
        <section id="routes" class="section">
            <div class="budget-filter">
                <label for="routeBudget">总预算（元）：</label>
                <input type="number" id="routeBudget" min="0" placeholder="请输入总预算">

                <label for="routeDuration" style="margin-left: 1rem;">游玩天数：</label>
                <input type="number" id="routeDuration" min="1" placeholder="输入天数"
                       style="padding: 0.5rem; border-radius: 25px; border: 1px solid #ccc; width: 100px;">

                <button onclick="generateRoutesByConditions()" style="margin-left: 1rem;">生成路线</button>
            </div>

            <!-- 经典路线模块 -->
            <div class="section-header">
                <h2>经典推荐路线</h2>
                <p>精选热门旅游路线，满足不同需求</p>
            </div>
            <div class="routes-container" id="classicRoutes">
                <!-- 经典路线将通过JS加载 -->
            </div>
            <!-- 主题路线推荐模块 -->
<!--            <div class="section-header" style="margin-top: 3rem;">-->
<!--                <h2>主题路线推荐</h2>-->
<!--                <p>根据不同兴趣爱好精心设计的特色路线</p>-->
<!--            </div>-->
<!--            <div class="routes-container" id="themeRoutes">-->
<!--                &lt;!&ndash; 主题路线将通过JS加载 &ndash;&gt;-->
<!--            </div>-->
            <!-- 动态生成路线区域 -->
            <div class="section-header" style="margin-top: 3rem;">
                <h2>个性化推荐路线</h2>
                <p>根据您的预算和天数生成的专属路线</p>
            </div>
            <div class="routes-container" id="dynamicRoutes">
                <div class="route-hint"
                     style="text-align: center; padding: 2rem; background: white; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
                    <i class="fas fa-map-signs" style="font-size: 3rem; color: #667eea; margin-bottom: 1rem;"></i>
                    <h3>使用上方筛选条件生成个性化路线</h3>
                    <p style="margin-top: 1rem; color: #666;">根据您的预算和游玩天数，我们将为您推荐最合适的景点组合</p>
                </div>
            </div>
        </section>

        <!-- 地图导航 -->
        <section id="map" class="section">
            <div class="section-header">
                <h2>地图导航</h2>
                <p>查看景点位置，规划您的行程</p>
            </div>
            <div class="map-container">
                <div class="map-placeholder">
                    <i class="fas fa-map"></i>
                    <p>地图功能开发中...</p>
                    <p>将集成高德地图或百度地图API</p>
                </div>
            </div>
        </section>
    </main>

    <!-- 底部 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h3>井冈山旅游导航</h3>
                <p>专业的井冈山旅游服务平台</p>
            </div>
            <div class="footer-section">
                <h4>联系我们</h4>
                <p><i class="fas fa-phone"></i> 400-123-4567</p>
                <p><i class="fas fa-envelope"></i> info@jinggangshan.com</p>
            </div>
            <div class="footer-section">
                <h4>关注我们</h4>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 井冈山旅游导航. 保留所有权利.</p>
        </div>
    </footer>
</div>

<!-- 景点详情模态框 -->
<div id="attractionModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <div id="modalContent">
            <!-- 模态框内容将通过JavaScript动态生成 -->
        </div>
    </div>
</div>

<script src="data.js"></script>
<script src="script.js"></script>
</body>
</html>